import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import vueJsx from '@vitejs/plugin-vue-jsx' // 使用jsx
// import VueRouter from 'unplugin-vue-router/vite' // 自动化路由
import WindiCSS from 'vite-plugin-windicss'

/* 自动导入 */
import AutoImport from 'unplugin-auto-import/vite' // 自动导入api
import Components from 'unplugin-vue-components/vite' // 自动导入组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
const resolve = dir => {
  return path.resolve(__dirname, dir)
}
export default defineConfig({
  // 设置别名
  resolve: {
    alias: {
      '@': resolve('src'),
      assets: resolve('src/assets'),
      components: resolve('src/components'),
      utils: resolve('src/utils'),
      server: resolve('src/server'),
      UseApi: resolve('src/server/apis/UseApi.js'),
      useHook: resolve('src/utils/useHook.js')
    }
  },
  plugins: [
    vue(),
    vueJsx(),
    WindiCSS(),
    Components({
      /* options */
      resolvers: [ElementPlusResolver()],
      // dirs: ['src/components'], // 默认
      dts: 'src/auto-component.d.ts'
    }),
    AutoImport({
      imports: ['vue', 'vue-router'],
      // 设置为在'src/'目录下生成解决ts报错，默认是当前目录('./'，即根目录)
      dts: 'src/auto-import.d.ts',
      // 自动生成'eslintrc-auto-import.json'文件，在'.eslintrc.cjs'的'extends'中引入解决报错
      // 'vue-global-api'这个插件仅仅解决vue3 hook报错
      eslintrc: {
        enabled: true
      }
    })
  ],
  css: {
    preprocessorOptions: {
      scss: {
        // 全局添加scss
        additionalData: `@use '@/assets/css/theme/index.scss' as *;`,
        silenceDeprecations: ['legacy-js-api']
      }
    }
  },
  server: {
    prot: '3000'
  }
})
